<template>
  <view class="container">
    <u-swipe-action
      :show="item.show"
      :index="index"
      class="to-do-item"
      v-for="(item, index) in datas"
      :key="item.id"
      @click="click"
      @open="open"
      :options="options"
    >
      <view class="date-text">{{ item.dateStr }}</view>
      <view class="title">{{ item.title }}</view>
      <view class="content">{{ item.content }}</view>
    </u-swipe-action>
  </view>
</template>

<script>
export default {
  name: "to-do-item",
  props: {
    datas: {
      type: Array,
      default: () => [],
    },
  },
  data() {
    return {
      options: [
        {
          text: "标记为完成",
          style: { backgroundColor: "#007aff" },
        },
        {
          text: "删除",
          style: {
            backgroundColor: "#dd524d",
          },
        },
      ],
    };
  },
  computed: {},
  methods: {
    click(index) {},
    open() {},
  },
  watch: {},

  // 组件周期函数--监听组件挂载完毕
  mounted() {},
  // 组件周期函数--监听组件数据更新之前
  beforeUpdate() {},
  // 组件周期函数--监听组件数据更新之后
  updated() {},
  // 组件周期函数--监听组件激活(显示)
  activated() {},
  // 组件周期函数--监听组件停用(隐藏)
  deactivated() {},
  // 组件周期函数--监听组件销毁之前
  beforeDestroy() {},
};
</script>

<style scoped lang="scss">
.container {
  display: flex;
  padding: 32rpx;
  flex-direction: column;

  .to-do-item {
    display: flex;
    flex-direction: column;

    > view {
      margin-top: 16rpx;
    }

    .title {
      font-size: 30rpx;
    }

    .content {
      font-size: 28rpx;
    }

    .date-text {
      font-size: 32rpx;
    }
  }
}
</style>
